    <template>
  <div id="publicPraise">
    <div class="main">
      <div class="top">
        <div class="left">
          <div class="goodContainer">
            <ul>
              <li v-for="(item,index) of stars" :key="index">
                <div class="per" id="per1">{{item.num}}%</div>
                <div class="kuang">
                  <div class="inner" id="inner1" :style="{width:item.nums*100+'px'}"></div>
                </div>
                <div class="star">
                  <img :src="item.img" alt />
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <p>{{score}}分</p>
          <p>{{total}}人参与</p>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <div id="mainMan"></div>
          <div id="mainMans">
            <img
              id="man"
              src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/man.png"
              alt
            />
          </div>

          <div id="mainWomans">
            <img
              id="woman"
              src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/woman.png"
              alt
            />
          </div>
          <div id="mainWoman"></div>
        </div>
        <div class="right">
          <div class="man">
            <ul>
              <li>
                <img
                  src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/man.png"
                  alt
                />
              </li>
              <li>
                <img
                  src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/man.png"
                  alt
                />
              </li>
              <li>
                <img
                  src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/man.png"
                  alt
                />
              </li>
            </ul>
            <div>男士占比60%</div>
          </div>
          <div class="woman">
            <ul>
              <li>
                <img
                  src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/woman.png"
                  alt
                />
              </li>
              <li>
                <img
                  src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/woman.png"
                  alt
                />
              </li>
            </ul>
            <div>女士占比40%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

    <script>
import axios from "axios";
import echarts from "echarts"; //引入echarts
export default {
  name: "publicPraise",
  data() {
    return {
      stars: [],
      total: 0,
      score: 0,
    };
  },
  mounted() {
    this.getData();
    this.getReport1();
    this.getReport2();
    var that = this;
    setInterval(that.getData, 5000);
  },
  methods: {
    getData() {
      var that = this;
      axios.get("index.php?g=api&m=index&a=getStar").then(function (res) {
        var data = res.data.content;
        that.stars = data.star;
        that.total = data.num;
        that.score = data.good;
        console.log(that.stars, 1111111111111);
      });
    },
    getReport1() {
      var myChart = this.$echarts.init(document.getElementById("mainMan"));
      //console.log(1111,myChart)
      var option = null;
      option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          icon: "circle",
          textStyle: {
            // 提示框内容的样式
            color: "#FFF",
            fontSize: 10,
          },
        },
        series: [
          {
            color: ["#60D8F6", "#44C0E8", "#50A1F3", "#76AAFF", "#32C7FE"],
            name: "好评率",
            type: "pie",
            radius: ["30%", "55%"],
            avoidLabelOverlap: false,

            labelLine: {
              normal: {
                show: true,
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 4,
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b} : {c} ({d}%)",
                },
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 10,
                },
                labelLine: { show: true },
              },
            },

            data: [
              { value: 20, name: "21-30岁人群" },
              { value: 6, name: "31-40岁人群" },
              { value: 16, name: "41-50岁人群" },
              { value: 5, name: "51-60岁人群" },
              { value: 18, name: "0-20岁人群" },
            ],
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
        window.addEventListener(
          "resize",
          () => {
            myChart.resize();
          }
          
        );
      }
      //console.log("执行力",option)
    },
    getReport2() {
      var myChart = this.$echarts.init(document.getElementById("mainWoman"));
      //console.log(1111,myChart)
      var option = null;
      option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          icon: "circle",
          textStyle: {
            // 提示框内容的样式
            color: "#FFF",
            fontSize: 10,
          },
        },
        series: [
          {
            color: ["#60D8F6", "#44C0E8", "#50A1F3", "#76AAFF", "#32C7FE"],
            name: "好评率",
            type: "pie",
            radius: ["30%", "55%"],
            avoidLabelOverlap: false,

            labelLine: {
              normal: {
                show: true,
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 3,
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b} : {c} ({d}%)",
                },
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 10,
                },
                labelLine: { show: true },
              },
            },

            data: [
              { value: 20, name: "21-30岁人群" },
              { value: 6, name: "31-40岁人群" },
              { value: 16, name: "41-50岁人群" },
              { value: 5, name: "51-60岁人群" },
              { value: 18, name: "0-20岁人群" },
            ],
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
        window.addEventListener(
          "resize",
          () => {
            myChart.resize();
          }
        );
      }

      // myChart.resize();
      //console.log("执行力",option)
    },
  },
};
</script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
#publicPraise {
  width: 24.2vw;
  height: 33.7vh;
  padding: 5.5vh 2vw 0 2vw;
  background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/good.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#publicPraise .main {
  width: 100%;
  height: 27.7vh;
}
#publicPraise .main .top {
  width: 100%;
  height: 11.1vh;
  display: flex;
  justify-content: flex-start;
}
#publicPraise .main .top .left {
  width: 17.1vw;
  height: 100%;
}
.goodContainer {
  width: 100%;
  height: 100%;
  color: #fff;
}
.goodContainer ul {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.goodContainer ul li {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 1.8vh;
}
.goodContainer ul li > div:first-child {
  width: 2vw;
}
.goodContainer ul li div.star {
  height: 1.6vh;
}
.goodContainer ul li div.star img {
  display: block;
  height: 100%;
}
.goodContainer ul li div.per {
  font-weight: 500;
  color: white;
  font-size: 0.15rem;
}
.goodContainer ul li div.kuang {
  width: 5.2vw;
  height: 0.3vh;
  background-color: #063a80;
  position: relative;
  margin-left: 0.5vw;
  margin-right: 1.8vh;
}
.goodContainer ul li div.kuang div.inner {
  background-color: #fec44c;
  width: 0.52vw;
  height: 0.3vh;
  position: absolute;
  top: 0;
  left: 0;
}
#publicPraise .main .top .right {
  color: #fec44c;
  font-size: 0.2rem;
  width: 4.6vw;
}
#publicPraise .main .top .right p {
  text-align: right;
  margin-top: 3.3vh;
  line-height: 3vh;
}
#publicPraise .main .top .right p:last-child {
  color: #fff;
  margin-top: 0;
  font-size: 0.15rem;
}
#publicPraise .main .bottom {
  margin-top: 1.8vh;
  width: 100%;
  height: 12vh;
  display: flex;
  justify-content: flex-start;
}
#publicPraise .main .bottom .left {
  width: 17vw;
  height: 100%;
  display: flex;
  position: relative;
}
#man,
#woman {
  display: block;
  width: 1.5vw;
  position: absolute;
}
#man {
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}
#woman {
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}
#publicPraise .main .bottom .right {
  width: 4.68vw;
  height: 100%;
  padding-top: 1.2vh;
}
#publicPraise .main .bottom .right .woman,
#publicPraise .main .bottom .right .man {
  width: 100%;
  height: 40%;
  color: #fff;
  font-size: 0.1rem;
  line-height: 1.8vh;
  margin-top: 1.2vh;
}
#publicPraise .main .bottom .right .woman ul,
#publicPraise .main .bottom .right .man ul {
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
#publicPraise .main .bottom .right .woman ul li img,
#publicPraise .main .bottom .right .man ul li img {
  width: 1vw;
}
#mainMan,
#mainWoman {
  width: 50%;
  height: 100%;
  position: relative;
}
#mainMans,
#mainWomans {
  width: 50%;
  height: 100%;
  position: absolute;
}
#mainMans {
  left: 0%;
}
#mainWomans {
  left: 50%;
}
</style>